<template>
  <div class="login-contain">

    <main>
      <el-form :model="form" :rules="rules" ref="ruleFormRef" class="demo-ruleForm">

        <img src="../../imgs/logo.png" alt="">
        <p>在线教育后台管理系统</p>
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" :prefix-icon="Avatar" />
        </el-form-item>

        <!-- 密码框 -->
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password :prefix-icon="Lock" />
        </el-form-item>

        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click="loginHandler(ruleFormRef)" :disabled="hasDisable">登录</el-button>
        </el-form-item>
      </el-form>
    </main>
    <!-- 版权信息 -->
    <div class="copy">
      <p>Copyright © Mockplus, All Rights Reserved.</p>
      <p>user <a>admin<span>123456</span></a></p>
    </div>

  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Avatar, Lock } from '@element-plus/icons-vue'
import { login } from '../../api/user';
import { userStore } from "@/stores/user.js"
import { useRouter } from "vue-router"

const hasDisable = ref(false)

const store = userStore()
const router = useRouter()
// 表单数据
const form = reactive({
  username: 'admin',
  password: '123456'
})

const ruleFormRef = ref()

//表单校验规则
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度3-5个字符', trigger: 'change' },
  ],
  password: [
    { required: true, message: '密码不能为空!', trigger: 'blur' },
    { min: 5, max: 15, message: '密码的长度在 5 到 15 个字符之间', trigger: 'change' }
  ],
})

const loginSuccess = () => {
  ElMessage({
    message: '登录成功',
    type: 'success',
  })
}

const loginError = () => {
  ElMessage.error('登录失败')
}

// 登录按钮点击
const loginHandler = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      hasDisable.value = true
      login({
        adminname: form.username,
        password: form.password
      }).then((result) => {
        if (result.code == 200) {
          router.replace("/home/index")
        }
        store.uesrdata = result.data
        loginSuccess()
      }).finally(() => {
        hasDisable.value = false
      })
    } else {
      loginError()
      return false
    }
  })
}

</script>

<style lang="scss" scoped>
.login-contain {
  width: 100%;
  height: 100%;
  background: url(../../imgs/bg.png) center no-repeat;
  overflow: auto;
}

main {
  width: 350px;
  background: #ffffff;
  border-radius: 16px;
  text-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid darkgrey;
  margin: 160px auto;
  margin-bottom: 30px;
}

img {
  display: block;
  width: 85px;
  height: 67px;
  margin: 20px auto;
}

p {
  font-size: 20px;
  font-weight: 900;
  color: #2f64fa;
  text-align: center;

}

.el-input,
.el-button {
  width: 286px;
  height: 40px;
  margin: 5px auto;
  border-radius: 8px;
}

.el-button {
  background-color: #1e79fc;
  border-radius: 30px;
  margin: 20px auto;
}

.copy p {
  font-size: 15px;
  color: darkgray;
  font-weight: normal;
  margin: 10px 0px;
}

:deep(.el-form-item__error) {
  left: 34px;

}
</style>